<template lang="html">
  <div class="loading_index_content">
    <div class="content-promote">
      <div class="wrapper">
        <div class="fragment1">
          <h4 class="title">专注于提升AI开发效率</h4>
          <span class="desc">BitaHub提供快速构建、训练模型的能力，让你专注于业务和科研，无需分心。</span>
          <el-button v-if="userInfo && userInfo.token" class="link" type="primary" round @click="toSignup">
          进入系统</el-button>
          <el-button v-else class="link" type="primary" round @click="toSignup">免费体验</el-button>
          <div class="charging">
            平台将于2019.10.10日启动算力收费方案
            <a class="detail" @click="linkTo('/chargingtips')">查看详情</a>
          </div>
        </div>
        <div class="fragment2">
          <span class="bg"></span>
          <div class="con">
            <i class="icon-con-time"></i>
            <div class="desc">
              <h4 class="tit">节省时间，专注应用开发</h4>
              <p class="intr">BitaHub在云端为用户提供重要的生产功能：底层基础架构、运行环境、日志记录、安全性等，让您的团队专注于应用开发。</p>
            </div>
          </div>
          <i class="icon-intr"></i>
        </div>
      </div>
    </div>
    <div class="content-chara">
      <div class="wrapper">
        <div class="fragment1">
          <div class="support">
            <i class="icon-support"></i>
            <h4 class="tit">支持分布式训练</h4>
            <p class="desc">训练模型需要一个调试过程，我们提供便捷的分布式训练支持。一次任务提交中可包含多个子任务，可高效的进行跨机器的多任务训练。</p>
          </div>
          <i class="icon-fragment1-job"></i>
        </div>
        <i class="icon-fragment1-m"></i>
        <div class="fragment2">
          <div class="online">
            <h4 class="tit">在线编辑、调试</h4>
            <p class="desc">平台内置调试工具，可在线编辑代码、调试任务，一键启动，免去开发环境配置。</p>
          </div>
          <i class="icon-fragment2-debu"></i>
        </div>
      </div>
    </div>
    <div class="content-adap">
      <div class="wrapper">
        <div class="adap">
          <i class="icon-adap"></i>
          <div class="adap-txt">
            <h4 class="tit">适配主流AI框架</h4>
            <p class="desc">集成深度学习所需的主流框架，并针对性能进行了优化，您也可以轻松安装自定义依赖项。</p>
          </div>
          <ul class="frames">
            <li class="icon-frame"></li>
            <li class="icon-frame"></li>
            <li class="icon-frame"></li>
            <li class="icon-frame"></li>
            <li class="icon-frame"></li>
          </ul>
        </div>
        <h3 class="cloud-tit">类脑云OS</h3>
        <p class="cloud-desc">类脑云OS是面向深度学习及下一代人工智能的计算系统，为BitaHub提供技术支持。</p>
        <ul class="cloud-pecu">
          <li class="item">
            <i class="icon-pecu"></i>
            <h5 class="pecu-tit">功能强大</h5>
            <p class="pecu-desc">高效的计算资源调度，提高算法训练效率。</p>
          </li>
          <li class="item">
            <i class="icon-pecu"></i>
            <h5 class="pecu-tit">并行调试</h5>
            <p class="pecu-desc">同时实验所有可能的参数来快速获取结果。</p>
          </li>
          <li class="item">
            <i class="icon-pecu"></i>
            <h5 class="pecu-tit">简单</h5>
            <p class="pecu-desc">快速创建任务，通过简单直观的界面管理所有项目。</p>
          </li>
        </ul>
        <ul class="cloud-pecu cloud-pecu2">
          <li class="item">
            <i class="icon-pecu"></i>
            <h5 class="pecu-tit">TensorBoard</h5>
            <p class="pecu-desc">训练时和结束后轻松查看模型的分析图表。</p>
          </li>
          <li class="item">
            <i class="icon-pecu"></i>
            <h5 class="pecu-tit">安全可靠</h5>
            <p class="pecu-desc">可靠的基础架构和多层安全性，为您的生产工作提供充分保障。</p>
          </li>
          <li class="item">
            <i class="icon-pecu"></i>
            <h5 class="pecu-tit">技术支持</h5>
            <p class="pecu-desc">专门的技术人员，全天候进行技术支持和问题解答。</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="content-resou">
      <div class="wrapper">
        <h4 class="tit">丰富的数据资源</h4>
        <p class="desc">BitaHub提供精选的公开项目和开箱可用的数据集，并持续更新。</p>
      </div>
    </div>
    <div class="content-details">
      <div class="wrapper">
        <h4 class="open-title">
          <span class="open-num">{{totalProject}}</span>&nbsp;个公开项目 |
          <span class="open-num">{{projectCategory}}</span>&nbsp;个分类
        </h4>
        <ul class="project-detail">
          <li class="item" v-for="(item, index) in projects" :key="index">
            <h5 class="tit">{{item.projectName}}</h5>
            <p class="desc">{{item.profile}}</p>
            <span class="use">{{item.copyNumber}}次使用</span>
          </li>
        </ul>
        <h4 class="open-title">
          <span class="open-num">{{totalDataSet}}</span>&nbsp;个数据集 |
          <span class="open-num">{{dataSetCategory}}</span>&nbsp;个数据集类目
        </h4>
        <ul class="project-detail">
          <li class="item" v-for="(item, index) in dataSets" :key="index">
            <h5 class="tit">{{item.name}}</h5>
            <p class="desc">{{item.profile}}</p>
            <span class="use">{{item.userProjectCount}}次使用</span>
          </li>
          <!-- <li class="item">
            <h5 class="tit">pytorch</h5>
            <p class="desc">Whether you're new to programming or an experienced developer, it's easy to learn and use Python.</p>
            <span class="use">3次使用</span>
          </li>
          <li class="item">
            <h5 class="tit">pytorch</h5>
            <p class="desc">Whether you're new to programming or an experienced developer, it's easy to learn and use Python.</p>
            <span class="use">3次使用</span>
          </li> -->
        </ul>
        <div class="login-btn">
          <el-button v-if="userInfo && userInfo.token" class="btn" type="primary" round @click="toSignin">查看更多</el-button>
          <el-button v-else class="btn" type="primary" round @click="toSignin">登录查看更多</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getOpenProjectInfo, getOpenProjectCategory } from '@/api/project'
import { getOpenDataSetInfo } from '@/api/dataset'

export default {
  data () {
    return {
      // 数据集
      dataSets: [],
      // 公开项目
      projects: [],
      // 公开项目总数
      totalProject: 0,
      // 项目分类总数
      projectCategory: 0,
      // 数据集总数
      totalDataSet: 0,
      // 数据集类目
      dataSetCategory: 0
    }
  },
  methods: {
    // 去注册
    toSignup () {
      if (this.userInfo && this.userInfo.token) {
        this.$router.push({ path: '/project/list' })
      } else {
        // window.open(`${process.env.VUE_APP_BITA_REGISTER}`)
        this.$router.push({ path: '/login' })
      }
    },
    // 去登录 / 已登录跳转数据集
    toSignin () {
      if (this.userInfo && this.userInfo.token) {
        this.$router.push({ path: '/dataset' })
      } else {
        this.$router.push({ path: '/login' })
      }
    },
    // 收费详情
    linkTo (path) {
      this.$router.push({ path })
    },
    // 获取着录页公开数据集
    _getOpenDataSetList () {
      let query = `?cp=1&ps=6`
      getOpenDataSetInfo(query).then(res => {
        if (res.message.code === 0) {
          this.dataSets = res.data.list.slice(0, 3)
          this.totalDataSet = res.data.total
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 类目及分类信息
    _getOpenProjectCategory () {
      getOpenProjectCategory().then(res => {
        if (res.message.code === 0) {
          this.dataSetCategory = res.data.dateBaseCount
          this.projectCategory = res.data.projectCount
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取着录页公开项目信息
    _getOpenProjectList () {
      let query = `?sortType=1&cp=1&ps=4`
      getOpenProjectInfo(query).then(res => {
        if (res.message.code === 0) {
          this.projects = res.data.list.slice(0, 3)
          this.totalProject = res.data.total
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted () {
    this._getOpenProjectList()
    this._getOpenProjectCategory()
    this._getOpenDataSetList()
  }
}
</script>

<style lang="stylus" scoped>
.loading_index_content
  width 100%
  .content-promote
    width 100%
    .wrapper
      width 1100px
      margin 0 auto
      .fragment1
        width 1100px
        height 636px
        background url(../../common/image/icon-fragment1.png) no-repeat center
        background-size 1100px 636px
        text-align center
        .title
          padding 78px 0 18px 0
          line-height 50px
          font-size 38px
          color #445361
          text-align center
          font-weight bold
        .desc
          display block
          width 100%
          padding-bottom 44px
          font-size 16px
          color #445361
          line-height 36px
          text-align center
        .link
          width 224px
          padding-top 18px
          padding-bottom 18px
          font-size 20px
          color #ffffff
          border-radius 28px
          user-select none
        .charging
          padding-top 28px
          text-align center
          font-size 16px
          color #333
          .detail
            padding-left 10px
            color #f00
            font-weight 600
      .fragment2
        height 654px
        padding 30px 0 118px 0
        position relative
        .bg
          display block
          width 534px
          height 450px
          background #F7FBFF
        .con
          position absolute
          top 92px
          left 36px
          z-index 111
          width 630px
          height 322px
          padding 90px 34px 0 24px
          background #FFFFFF
          box-shadow 0 2px 13px 6px rgba(15,115,241,0.18)
          font-size 0
          .icon-con-time
            display inline-block
            width 38px
            height 42px
            background url(../../common/image/icon-con-time.png) no-repeat top center
            background-size 38px 38px
            vertical-align top
          .desc
            display inline-block
            width 530px
            padding-left 30px
            .tit
              padding-bottom 48px
              line-height 42px
              font-size 32px
              color #445361
              font-weight bold
            .intr
              font-size 16px
              color #4C5B68
              line-height 30px
        .icon-intr
          position absolute
          bottom 120px
          right 0
          z-index 11
          display block
          width 778px
          height 246px
          background url(../../common/image/icon-intr.png ) no-repeat center
          background-size 100%
  .content-chara
    width 100%
    background #4D9DFF
    .wrapper
      width 1100px
      margin 0 auto
      padding 44px 0 138px 0
      .fragment1
        display flex
        padding-bottom 34px
        .support
          flex 1
          padding-right 138px
          padding-top 38px
          .icon-support
            display block
            width 148px
            height 34px
            background url(../../common/image/icon-support.png) no-repeat center
            background-size 100%
          .tit
            padding 74px 0 16px 0
            line-height 44px
            font-size 32px
            color #FFFFFF
            font-weight bold
          .desc
            font-size 16px
            color #FFFFFF
            line-height 30px
        .icon-fragment1-job
          display block
          width 480px
          height 342px
          flex 0 0 480px
          background url(../../common/image/icon-fragment1-job.png) no-repeat center
          background-size 100%
      .icon-fragment1-m
        display block
        width 100%
        height 26px
        background url(../../common/image/icon-fragment1-m.png) no-repeat center right
        background-size 108px 26px
      .fragment2
        display flex
        padding-top 66px
        .online
          flex 1
          padding-right 150px
          padding-top 104px
          .tit
            padding-bottom 20px
            line-height 44px
            font-size 32px
            color #FFFFFF
            font-weight bold
          .desc
            font-size 16px
            color #FFFFFF
            line-height 30px
        .icon-fragment2-debu
          flex 0 0 480px
          display block
          width 480px
          height 248px
          background url(../../common/image/icon-fragment2-debu.png) no-repeat center
          background-size 100%
  .content-adap
    width 100%
    background #FFFFFF
    .wrapper
      width 1100px
      margin 0 auto
      padding-top 150px
      padding-bottom 78px
      .adap
        display flex
        padding-left 10px
        padding-top 20px
        .icon-adap
          flex 0 0 42px
          height 42px
          background url(../../common/image/icon-con-time.png) no-repeat center
          background-size 38px 38px
          transform rotateZ(90deg)
        .adap-txt
          flex 1
          padding-left 16px
          padding-right 80px
          .tit
            padding-bottom 16px
            line-height 42px
            font-size 32px
            color #445361
            font-weight bold
          .desc
            font-size 16px
            color #4A4A4A
            line-height 30px
        .frames
          flex 0 0 510px
          display flex
          justify-content space-between
          margin-top -20px
          .icon-frame
            width 86px
            height 86px
            border-radius 6px
            background url(../../common/image/icon-frame1.png) no-repeat center
            background-size 34px 40px
            box-shadow 0 2px 11px 4px rgba(74,105,194,0.19)
          .icon-frame:nth-child(2)
            background url(../../common/image/icon-frame2.png) no-repeat center
            background-size 34px 32px
          .icon-frame:nth-child(3)
            background url(../../common/image/icon-frame3.png) no-repeat center
            background-size 40px 43px
          .icon-frame:nth-child(4)
            background url(../../common/image/icon-frame4.png) no-repeat center
            background-size 28px 45px
          .icon-frame:nth-child(5)
            background url(../../common/image/icon-frame5.png) no-repeat center
            background-size 37px 36px
          .icon-frame:nth-child(2n+1)
            margin-top 52px
      .cloud-tit
        padding-top 186px
        padding-bottom 16px
        line-height 42px
        font-size 32px
        color #445361
        text-align center
        font-weight bold
      .cloud-desc
        padding-bottom 94px
        line-height 30px
        font-size 16px
        color #4A4A4A
        text-align center
      .cloud-pecu
        display flex
        justify-content space-between
        padding-bottom 46px
        .item
          width 280px
          height 286px
          padding 40px 40px 0 40px
          background #FFFFFF
          box-shadow 0 2px 11px 4px rgba(74,105,194,0.19)
          border-radius 6px
          .icon-pecu
            display block
            width 90px
            height 90px
            margin 0 auto
            background url(../../common/image/icon-pecu1.png) no-repeat center
            background-size 68px 74px
          .pecu-tit
            line-height 32px
            padding 16px 0 8px 0
            font-size 24px
            color #2D323B
            text-align center
            font-weight bold
          .pecu-desc
            font-size 16px
            color #4A4A4A
            text-align center
            line-height 30px
        .item:nth-child(2)
          .icon-pecu
            background url(../../common/image/icon-pecu2.png) no-repeat center
            background-size 54px 54px
        .item:nth-child(3)
          .icon-pecu
            background url(../../common/image/icon-pecu3.png) no-repeat center
            background-size 66px 66px
      .cloud-pecu2
        .item:nth-child(1)
          .icon-pecu
            background url(../../common/image/icon-pecu11.png) no-repeat center
            background-size 71px 57px
        .item:nth-child(2)
          .icon-pecu
            background url(../../common/image/icon-pecu12.png) no-repeat center
            background-size 54px 54px
        .item:nth-child(3)
          .icon-pecu
            background url(../../common/image/icon-pecu13.png) no-repeat center
            background-size 54px 54px
  .content-resou
    width 100%
    height 380px
    background url(../../common/image/icon-resou.png) no-repeat center
    background-size 1920px 380px
    .wrapper
      width 1100px
      margin 0 auto
      padding-top 138px
      .tit
        padding-bottom 22px
        line-height 42px
        font-size 32px
        color #263F57
        font-weight bold
        text-align center
      .desc
        font-size 16px
        color #263F57
        line-height 30px
        text-align center
  .content-details
    width 100%
    background #ffffff
    .wrapper
      width 1100px
      margin 0 auto
      .open-title
        padding 102px 0 60px 0
        line-height 44px
        font-size 32px
        color #4D9DFF
        text-align center
        .open-num
          color #FF6300
      .project-detail
        width 100%
        padding-bottom 40px
        display flex
        justify-content space-between
        .item
          width 346px
          height 220px
          padding 32px 26px 0 26px
          background #FFFFFF
          box-shadow 0 2px 11px 4px rgba(74,105,194,0.19)
          border-radius 5px
          transition all 0.4s;
          cursor pointer
          &:hover
            background #4D9DFF
            .tit, .desc, .use
              color #ffffff
          .tit
            padding-bottom 16px
            line-height 38px
            font-size 30px
            color #4D9DFF
            font-weight bold
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
          .desc
            height 84px
            padding-bottom 24px
            font-size 14px
            color #4A4A4A
            line-height 20px
            word-break break-all
            word-wrap break-word
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            /*! autoprefixer: off */
            -webkit-box-orient vertical
            /* autoprefixer: on */
            -webkit-line-clamp 3
          .use
            line-height 20px
            font-size 14px
            color #4799E7
      .login-btn
        width 100%
        padding-top 50px
        padding-bottom 144px
        text-align center
        .btn
          width 300px
          padding-top 18px
          padding-bottom 18px
          border-radius 28px
          font-size 18px
</style>
